<template>
  <div class="remind-box">
    <div v-show="props.checked" class="remind">
      <span class="circle">!</span>
      <el-checkbox v-model="props.checked" label="" />
      <span><slot name="content"></slot></span>
      <!-- <span style="color: #777575; font-size: 10px">请勾选当前协议</span> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  checked: {
    type: Boolean,
    default: true,
  },
});
</script>
<style lang="scss" scoped>
.remind-box {
  height: 30px;
  .remind {
    min-width: 169px;
    padding: 4px;
    border-radius: 2px;
    background: #fdf5e8;

    box-sizing: border-box;
    border: 0.5px solid #f2c975;
    display: flex;
    align-items: center;
    .circle {
      display: inline-block;
      width: 22px;
      height: 22px;
      background: orange;
      margin-right: 10px;
      margin-left: 10px;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
